<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<title>Wealth Management Online</title>
		<%= stylesheet_link_tag '/ext-2.0/resources/css/ext-all' %>
		<style>
			.accesskey {
				text-decoration: underline;
			}
			
			.icon-grid {
				background-image: url(ext-2.0/examples/shared/icons/fam/grid.png) !important;
			}
			
			.add {
				background-image: url(ext-2.0/examples/shared/icons/fam/add.gif) !important;
			}
			
			.remove {
				background-image: url(ext-2.0/examples/shared/icons/fam/delete.gif) !important;
			}
		</style>
		<%= javascript_include_tag '/ext-2.0/adapter/ext/ext-base' %>
		<%= javascript_include_tag '/ext-2.0/ext-all' %>
		<%= javascript_include_tag '/ext-2.0/build/locale/ext-lang-zh_CN' %>
		<%= javascript_include_tag 'Ext/ux/LocalComboBox' %>
		<%= javascript_include_tag 'Ext/ux/PagingGridPanel' %>
		<%= javascript_include_tag 'application' %>
		<%= javascript_include_tag 'entities' %>
		<%= javascript_include_tag 'wol-lang-zh_CN' %>
		<script type="text/javascript">
			Ext.onReady(function() {
				var root = new Ext.tree.TreeNode({ expanded: true });
				
				var recordNode = root.appendChild(new Ext.tree.TreeNode({ expanded: true, text: Wol.NODES.nav.data }));
				var planNode   = root.appendChild(new Ext.tree.TreeNode({ expanded: true, text: Wol.NODES.nav.plan }));
				var statsNode  = root.appendChild(new Ext.tree.TreeNode({ expanded: true, text: Wol.NODES.nav.stats }));
				var toolsNode  = root.appendChild(new Ext.tree.TreeNode({ expanded: true, text: Wol.NODES.nav.tools }));
				var dataNode   = root.appendChild(new Ext.tree.TreeNode({ expanded: true, text: Wol.NODES.nav.data }));
				var prefsNode  = root.appendChild(new Ext.tree.TreeNode({ expanded: true, text: Wol.NODES.nav.prefs }));
				
				dataNode.appendChild(new Ext.tree.TreeNode({
					listeners: {
						click: function() { entities(); }
					},
					text: Wol.NODES.data.entity
				}));
				
				center = new Ext.Viewport({
					items: [{
						collapseMode: 'mini',
						collapsible: true,
						region: 'west',
						root: root,
						margins: '5 0 5 5',
						split: true,
						title: Wol.TITLES.tree,
						useSplitTips: true,
						width: 200,
						xtype: 'treepanel'
					}, {
						frame: true,
						items: { title: 'Financial Index' },
						layout: 'card',
						margins: '5 5 5 0',
						region: 'center',
						title: true,
						tools: [
							{ id: 'help' },
							{ id: 'refresh' }, {
								id: 'close',
								on: {
									click: function() { center.remove(center.items.last()); }
								}
							}
						]
					}],
					layout: 'border'
				}).findByType('panel')[0];
				
				Ext.each([ 'add', 'remove' ], function(item) {
					center.on(item, function() {
						var item = this.items.last();
						
						center.layout.setActiveItem(item.id);
						center.setTitle(item.title || 'Financial Index');
					});
				});
			});
		</script>
	</head>
</html>
